<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>相册</title>
    <style>
        html {
            height: 100%;
        }
        body {
            margin: 0;
            height: 100%;
            background: #333;
            background-image: url(../photos/personnalphoto/bz.jpg);
            background-size:100% 100%;

        }
        main{
            height: 100%;
            width: 100%;
            color: red;
            text-align: center;
        }
        #xc div {
            width: 100px;
            height: 100px;
            border: solid 5px #fff;
            border-bottom: solid 18px #fff;
            /*下边框*/
            background-size:100% 100%;
        }
        #xc div a {
            width: 100%;
            height: 100%;
            display: block;
            /*转化为块级元素*/
            text-indent: -200px;
            /*首行缩进*/
            overflow: hidden;
        }

        #xc div:hover {
            transform: scale(5) ! important;
            /*放的比例 ! important样式优先级。最高级 */
            z-index: 10;
            /*处理层级关系*/
            transition: 1s;
            /*效果的过度时间*/
        }
    </style>
    <link rel="stylesheet" href="/chajian/libs/fancybox/jquery.fancybox.css">
    <link rel="stylesheet" href="/chajian/libs/fancybox/helpers/jquery.fancybox-buttons.css">
    <link rel="stylesheet" href="/chajian/libs/fancybox/helpers/jquery.fancybox-thumbs.css">
    <script src="/chajian/libs/jquery1.js"></script>
    <script src="/chajian/libs/fancybox/jquery.fancybox.js"></script>
    <script src="/chajian/libs/fancybox/helpers/jquery.fancybox-buttons.js"></script>
    <script src="/chajian/libs/fancybox/helpers/jquery.fancybox-thumbs.js"></script>
</head>
<body>
<main>
    <a href="/shouye">返回主页</a>
</main>
<div id="xc">

    <div style="background-image:url(../photos/personnalphoto/l1.jpeg)">
        <a href="../photos/personnalphoto/l1.jpeg" rel="group">图片1</a>

    </div>
    <div style="background-image:url(../photos/personnalphoto/l2.jpeg)">
        <a href="../photos/personnalphoto/l2.jpeg" rel="group">图片2</a>

    </div>
    <div style="background-image:url(../photos/personnalphoto/l3.jpeg)">
        <a href="../photos/personnalphoto/l3.jpeg" rel="group">图片3</a>

    </div>

    <div style="background-image:url(../photos/personnalphoto/l4.jpeg)">
        <a href="../photos/personnalphoto/l4.jpeg" rel="group">图片4</a>

    </div>


    <div style="background-image:url(../photos/personnalphoto/l5.jpeg)">
        <a href="../photos/personnalphoto/l5.jpeg" rel="group">图片5</a>


    </div>
    <div style="background-image:url(../photos/personnalphoto/l6.jpeg)">
        <a href="../photos/personnalphoto/l6.jpeg" rel="group">图片6</a>

    </div>
    <div style="background-image:url(../photos/personnalphoto/l7.jpeg)">
        <a href="../photos/personnalphoto/l7.jpeg" rel="group">图片7</a>

    </div>
    <div style="background-image:url(../photos/personnalphoto/l8.jpeg)">
        <a href="../photos/personnalphoto/l8.jpeg" rel="group">图片8</a>

    </div>
    <div style="background-image:url(../photos/personnalphoto/l9.jpeg)">
        <a href="../photos/personnalphoto/l9.jpeg" rel="group">图片9</a>

    </div>
    <div style="background-image:url(../photos/personnalphoto/l10.jpeg)">
        <a href="../photos/personnalphoto/l10.jpeg" rel="group">图片10</a>

    </div>
    <div style="background-image:url(../photos/personnalphoto/liu.jpeg)">
        <a href="../photos/personnalphoto/liu.jpeg" rel="group">图片10</a>

    </div>
    <script src ="/javascripts/personnalphoto.js"></script>
</body>
</html>